<template>
  <el-input :type="inputType" class="password-input" v-bind="$attrs" @change="elinput">
    <slot>
      <a class="eye-btn" style="cursor:pointer" slot="append" circle icon="el-icon-view" @mousedown.stop="setInputType('text','eye')"
         @mouseup.stop="setInputType('password','eye-slash')">
        <font-awesome-icon :icon="eyeIcon"/>
      </a>
    </slot>
  </el-input>
</template>

<script>
  export default {
    name: "ElPasswordInput",
    data() {
      return {
        inputType: 'password',
        eyeIcon: 'eye-slash',
        inputValue: this.value
      }
    },
    props: ['value'],
    mounted() {

    },
    methods: {
      elinput(value) {
        this.$emit('input', value);
      },
      setInputType(type, ico) {
        this.inputType = type;
        this.eyeIcon = ico;
      }
    }
  }
</script>

<style scoped>

</style>
